import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { Toaster } from 'sonner';
import App from "./App.tsx";
import "./index.css";

const baseName = import.meta.env.DEV ? '/' : '/';

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter basename={baseName}>
      <App />
      <Toaster 
        position="top-center"
        richColors
        closeButton
        duration={1000}
        theme="light"
        style={{
          '--toastify-color-success': '#10b981',
          '--toastify-color-error': '#ef4444',
          '--toastify-color-warning': '#f59e0b',
          '--toastify-color-info': '#3b82f6',
        } as React.CSSProperties}
        toastOptions={{
          style: {
            animation: 'fadeOut 1s ease-in-out 1s forwards',
            minWidth: '300px',
            textAlign: 'center'
          }
        }}
      />
    </BrowserRouter>
  </StrictMode>
);
